<template>
	<ul>
		<router-link tag = "li" v-for = "item of list" :key = "item.id" :to = "'/music/'+item.item_id">
			<h3>- 音乐 -</h3>
			<h2>{{item.title}}</h2>
			<p class = "author">文 / {{item.author.user_name}}</p>
			<div class = "imgWrap">
				<div class="con">
					
					<img :src="item.img_url" alt="">
				</div>
			</div>
			<p class = "subtitle">{{item.subtitle}} · {{item.audio_author}} | {{item.audio_album}}</p>
			<p class = "post_date">{{item.post_date.substr(0,10)}}</p>
		</router-link>
	</ul>
</template>

<script>
import axios from 'axios'
export default {
	name : "musicMain",
	data () {
		return {
			list : []
		}
	},
	methods : {
		getMusicInfo () {
			axios.get("http://v3.wufazhuce.com:8000/api/channel/music/more/0?channel=wdj&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android").then(this.getMusicInfoSucc);
		},
		getMusicInfoSucc (res) {
			if(res.data.res === 0 && res.data.data) {
				this.list = res.data.data;
			}else {
				console.log("请求失败" + res.data.res);
				return;
			}
		}
	},
	mounted () {
		this.getMusicInfo();
	}
}
</script>

<style lang = "less" scoped>
	ul {
		padding-top:1rem;
		li{
			background: #fff;
			color:rgba(0,0,0,.6);
			margin-bottom:.2rem;
			h3 {
				text-align: center;
				font-size:.3rem;
				line-height:1.4rem;
			}
			h2 {
				padding:0 .4rem;
				font-size:.44rem;
				color:#000;
				font-weight: 500;
			}
			.author {
				padding:0 .4rem;

				line-height:1rem;
				font-size:.32rem;
			}
			.imgWrap {
				width:100%;
				height:0;
				overflow: hidden;
				padding-bottom:60%;
				position: relative;
				background:url(/static/images/music-list-right.png) no-repeat right top/auto 100%;
				.con {
					position: absolute;
					top:.1rem;
					left:0;
					bottom:.1rem;
					right:20%;
					border-radius: 0 9.9em 10em 0;
    				box-shadow: 0 0 0.625em 0.125em rgba(230, 230, 230, 0.5);
    				&:after{
    					content:"";
    					width:1.04rem;
    					height:1.04rem;
    					background: url("http://image.wufazhuce.com/play_btn_empty.png") no-repeat center/100% 100%;
    					position: absolute;
    					top:50%;
    					right:1.62rem;
    					transform:translateY(-50%);
    				}
				}
				img {
					position: absolute;
					top:50%;
					transform:translateY(-50%);
					right:.1rem;
					width:70%;
					border-radius:50%;
				}
			}
			.subtitle {
				padding:0 .4rem;
				color:#808080;
				font-size:.3rem;
				margin:.2rem 0 .4rem;
			}
			.post_date {
				padding:0 .4rem;
			}
		}
	}
</style>